import { Component, OnInit } from '@angular/core';
import { NzModalService, NzMessageService } from 'ng-zorro-antd';

import { UserService } from 'src/app/core/service/user.service';

import { AddUserModalComponent } from '../add-user-modal/add-user-modal.component';
import { EditUserComponent } from '../edit-user/edit-user.component';

@Component({
  selector: 'app-common-users',
  templateUrl: './common-users.component.html',
  styleUrls: ['./common-users.component.scss']
})
export class CommonUsersComponent implements OnInit {
  allChecked = false;
  indeterminate = false;
  displayData = [];
  filter: string;

  // 表格显示样式（页码、每页显示多少页、总共几页、获取到的数据）
  pageIndex = 1;      // 页码标识
  pageSize = 10;      // 每页展示多少数据 —— 10条
  total = 1;          // 总共1页
  dataSet = [];       // 数据集合
  loading = true;     // 加载
  sortValue = null;   // 种类值
  sortKey = null;     // 种类关键值
  searchGenderList: string[] = [];

  cancel(): void {
    this.nzMessageService.info('取消删除!');
  }

  /**
   * 用户管理
   * @param userUuid 用户的 Uuid
   */
  confirm(userUuid: string): void {
    this.userService.deleteUser(userUuid).subscribe(deleteData => {
      if (deleteData.status === 1) {
        this.nzMessageService.success('删除成功!');
        this.getUserPage();
      }
    });
  }

  constructor(
    private userService: UserService,
    private modalService: NzModalService,
    private nzMessageService: NzMessageService
  ) { }

  /**
   * 获取用户列表
   * @param reset 重置
   */
  getUserPage(reset: boolean = false): void {
    if (reset) {
      this.pageIndex = 1;
    }
    this.userService.getUserPage(this.pageIndex, this.pageSize, this.filter)
      .subscribe((userPage) => {
        this.loading = false;           // 获取到数据之后，不再显示加载图标
        this.total = userPage.total;    // 数据的条数
        this.dataSet = userPage.data;        // 数据集
      });
  }

  currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void {
    this.displayData = $event;
    this.refreshStatus();
  }

  /**
   * 刷新状态
   */
  refreshStatus(): void {
    const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true);
    const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked);
    this.allChecked = allChecked;
    this.indeterminate = (!allChecked) && (!allUnChecked);
  }

  ngOnInit(): void {
    this.getUserPage();
  }

  /**
   * 创建用户的模态框
   */
  createUserModal(): void {
    const modal = this.modalService.create({
      nzTitle: '创建用户',
      nzContent: AddUserModalComponent,
      nzComponentParams: {
      },
      nzFooter: null
    });
    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    modal.afterClose.subscribe(result => {
      this.getUserPage();
    });
  }

  /**
   * 创建编辑用户的模态框
   */
  editUserModal(email: string, firstName: string, lastName: string, userUuid: string): void {
    const modal = this.modalService.create({
      nzTitle: '编辑用户',
      nzContent: EditUserComponent,
      nzComponentParams: {
        email: email,
        firstName: firstName,
        lastName: lastName,
        userUuid: userUuid
      },
      nzFooter: null
    });
    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    modal.afterClose.subscribe(result => {
      this.getUserPage();
    });
  }
}
